<template>
  <div class="card-header flex-head">
    <!-- 搜索工作栏 -->
    <el-form
      :span="24"
      class="no-border-form"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="0px"
    >
      <el-form-item label="" prop="name" :span="4">
        <el-input
          class="fontSize"
          v-model="queryParams.name"
          placeholder="搜索"
          clearable
          :size="buttonSize.value"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-tag
          v-for="tag in searchHistoryList"
          :key="tag.id"
          closable
          :disable-transitions="false"
          :type="tagColors[Math.floor(Math.random() * 5)]"
          @close="handleClose(tag)"
          @click="handleQueryBySearchHistory(tag.name)"
          :size="tagSize.value"
          effect="dark"
          :span="20 / searchHistoryList.length"
          hit="true"
        >
          {{ tag.name }}
        </el-tag>
      </el-form-item>
    </el-form>

    <!-- 
    <template v-for="(item, index) in searchHistoryList">
      <el-row v-if="index % 3 === 0" :key="item.id">
        <el-col>
          <el-text class="fontSize" type="info" @click="handleQueryBySearchHistory(item.name)">
            {{ item.name + ' ' }}
          </el-text>

          <el-text
            v-if="index + 1 < searchHistoryList.length"
            class="fontSize"
            type="info"
            @click="handleQueryBySearchHistory(searchHistoryList[index + 1].name)"
          >
            {{ searchHistoryList[index + 1].name + ' ' }}
          </el-text>

          <el-text
            v-if="index + 2 < searchHistoryList.length"
            class="fontSize"
            type="info"
            @click="handleQueryBySearchHistory(searchHistoryList[index + 2].name)"
          >
            {{ searchHistoryList[index + 2].name + ' ' }}
          </el-text>
        </el-col>
      </el-row>
    </template> -->
  </div>

  <Swiper
    v-if="mode === 'broadcast'"
    class="swiper-broadcast"
    :style="`
      --swiper-width: ${swiperWidth};
      --swiper-height: ${swiperHeight};
      --swiper-primary-color: ${colorPalettes[5]};
      --swiper-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    `"
    :modules="modulesBroadcast"
    :navigation="navigation"
    :speed="speed"
    :loop="loop"
    lazy
    @swiper="onSwiper"
    @slide-change="onSlideChange"
    v-bind="$attrs"
  >
    <SwiperSlide v-for="(item, index) in spuList" :key="index">
      <el-card shadow="hover" class="cardClass" ref="refCard">
        <template #header>
          <div class="card-header">
            <span>
              <i class="el-icon-shopping-cart-full" style="color: #409eff">
                <span style="color: #409eff">{{ ' ' + item.name }} </span>
              </i>
            </span>
          </div>
        </template>

        <div>
          <!-- <el-checkbox v-model="item.checked" style="float: right; padding: 3px 0"
                @click.native="orderCardHandle(item)"> -->
          <!-- <i class="el-icon-success" style="float: right "></i> -->
          <!-- </el-checkbox> -->

          <!-- 商品封面视频或图片  -->

          <template v-if="item.videoUrl">
            <video-player
              :ref="'videoplay' + item.id?.toString()"
              class="videosClass"
              :id="'videoplay' + item.id?.toString()"
              :src="item.videoUrl"
              :poster="item.picUrl"
              crossorigin="anonymous"
              controls
              playsinline
              :volume="0.6"
              x5-video-player-type="h5"
              :options="playerOptions"
              @play="playFun(item.id, item.videoUrl)"
            />
          </template>
          <template v-else>
            <el-image :src="item.picUrl" fit="fill" lazy />
          </template>
        </div>
        <!-- <time class="time">{{ currentDate }}</time> -->
        <!-- <el-button type="text" class="button">操作按钮</el-button> -->

        <!-- 页脚 -->
        <!-- <template #footer> -->
        <div class="bottom clearfix">
          <p class="el-icon-shopping-cart-full" style="color: #409eff">
            {{ item.introduction }}
          </p>
          <!-- <div v-html="item.description"></div> -->
          <p class="el-icon-shopping-cart-full" style="color: red">
            {{ ' ￥' + item.price }}

            <!-- <el-input-number v-model="item.nnum" :precision="2" :step="0.1" :min="0" :max="1000" placeholder="选购数量"
                  @change="selectTrigger(item.nnum, item.cmaterialid)" size="mini">
                </el-input-number> -->
          </p>
          <!-- <span v-if="item.norigtaxmny != null && item.norigtaxmny > 0" style="color: #409EFF"> {{
                item.norigtaxmny + ' 元' }}
              </span> -->
        </div>
        <!-- </template> -->
      </el-card>
    </SwiperSlide>
  </Swiper>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import 'vue-amazing-ui/dist/style.css' // 引入样式文件
import { useInject } from 'vue-amazing-ui'
import type { Swiper as SwiperTypes } from 'swiper/types'
import { Swiper, SwiperSlide } from 'swiper/vue'
import {
  Navigation,
  Pagination,
  Autoplay,
  Mousewheel,
  EffectFade,
  EffectCube,
  EffectFlip,
  EffectCoverflow,
  EffectCards,
  EffectCreative
} from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
// import 'swiper/css/autoplay' // 目标文件为空
// import 'swiper/css/mousewheel' // 目标文件为空
import 'swiper/css/effect-fade'
import 'swiper/css/effect-cube'
import 'swiper/css/effect-flip'
// import 'swiper/css/effect-coverflow' // 目标文件为空
import 'swiper/css/effect-cards'
import 'swiper/css/effect-creative'

// 导入视频播放组件
import 'video.js/dist/video-js.css'
import { VideoPlayer } from '@videojs-player/vue'
// import videojs from 'video.js'

import { reactive, nextTick } from 'vue'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
// import { SpuDOApi, SpuDOVO } from '@/api/product/spu'
//spu产品接口
import * as ProductSpuApi from '@/api/mall/product/spu'
// 搜索历史信息接口
import * as SearchHistoryApi from '@/api/search/history/index'
import { ElScrollbar } from 'element-plus'
import { forEach } from 'min-dash'
import { number } from 'vue-types'
//付费弹窗
import showPayForm from './showPayForm.vue'
import TenantForm from './TenantForm.vue'

export interface Image {
  name?: string // 图片名称
  src: string // 图片地址
  link?: string // 图片跳转链接
  target?: '_self' | '_blank' // 如何打开跳转链接
}

export interface Props {
  images?: Image[] // 轮播图片数组
  width?: number | string // 轮播区域宽度，单位 px
  height?: number | string // 轮播区域高度，单位 px
  mode?: 'banner' | 'carousel' | 'broadcast' // banner: 轮播图模式; carousel: 走马灯模式; broadcast: 信息展播模式
  navigation?: boolean // 是否显示导航
  effect?: 'slide' | 'fade' | 'cube' | 'flip' | 'coverflow' | 'cards' | 'creative' // 切换动画效果
  delay?: number // 自动切换的时间间隔，仅当 mode: 'banner' 时生效，单位 ms
  speed?: number // 切换过渡的动画持续时间，单位 ms
  loop?: boolean // 是否循环切换
  pauseOnMouseEnter?: boolean // 当鼠标移入走马灯时，是否暂停自动轮播，仅当 mode: 'banner' 或 mode: 'carousel' 时生效
  swipe?: boolean // 是否可以鼠标拖动
  preloaderColor?: 'theme' | 'white' | 'black' // 预加载时的 loading 颜色
  direction?: string // 纵向滚动设置
}

const props = withDefaults(defineProps<Props>(), {
  images: () => [],
  width: '100%',
  height: '500',
  mode: 'banner',
  navigation: false,
  effect: 'slide',
  delay: 3000,
  speed: 300,
  loop: false,
  pauseOnMouseEnter: false,
  swipe: true,
  preloaderColor: 'theme',
  direction: 'vertical'
})

// 视频列表
const spuList = ref<ProductSpuApi.Spu[]>([])

//历史搜索列表
const searchHistoryList = ref<SearchHistoryApi.HistoryVO[]>([
  { id: 1, userid: 1, name: 'test1', sort: 1 },
  { id: 2, userid: 1, name: 'test2', sort: 2 },
  { id: 3, userid: 1, name: 'test3', sort: 3 }
])

// 视频播放器配置
const playerOptions = ref({
  // height: 200,
  // width: document.documentElement.clientWidth, //播放器宽度
  width: videoweight, //播放器宽度
  playbackRates: [0.6, 1.0, 1.5, 2.0], // 播放速度
  autoplay: false, //any 任何情况 如果true,浏览器准备好时开始回放。 false 不自动播放
  muted: false, // 默认情况下将会消除任何音频。
  loop: false, // 导致视频一结束就重新开始。
  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  language: 'zh-CN',
  aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  controls: true,
  controlBar: {
    timeDivider: true,
    durationDisplay: true,
    remainingTimeDisplay: false,
    fullscreenToggle: true // 全屏按钮
  }
})
// 列表加载中标记
const loading = ref(false)

// 查询视频参数
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  tabType: 0,
  name: '',
  categoryId: undefined,
  createTime: undefined
})

const tagColors = ref(['success', 'info', 'warning', 'danger'])

// 视频宽度，比1/2clientWidth浏览器可视窗口宽度小 不如改为所处容器的可视窗口宽度即直接用视频元素所在的cardClasses元素的宽度
// var videoweight = ref(document.documentElement.clientWidth * 0.44)
var videoweight = ref(0)

// 列表的总页数
const total = ref(0)

//按钮大小标记large small
const buttonSize = ref('small') // 小于993视为平板及手机
//标签大小标记 medium / small / mini
const tagSize = ref('medium')

// 扫码支付弹窗
// const tenantFormRef = ref()

/** 初始化 **/
onMounted(async () => {
  window.addEventListener('resize', handleRize)
  handleRize()
  debugger
  // tenantFormRef.value.iframeHandleResize() // 初始化设置尺寸

  await searchHistory()

  queryParams.value.name = ''
  if (searchHistoryList.value.length > 0) {
    queryParams.value.name = searchHistoryList.value[searchHistoryList.value.length - 1].name
  }

  // searchHistoryList.value.forEach((e) => {-1
  //   queryParams.value.name += e.name + ' '
  // })
  getList()
})

// 移除事件监听器
onUnmounted(() => {
  // const scrollContainer = document.querySelector('.scroll-container');
  // scrollContainer.removeEventListener('scroll', handleScroll);
  window.removeEventListener('resize', handleRize)
})

const handleRize = () => {
  if (document.body.offsetWidth < 993) {
    buttonSize.value = 'small' // 小于993视为平板及手机
    tagSize.value = 'small'

    console.debug('onMounted buttonSize :' + buttonSize.value)
  } else {
    buttonSize.value = 'large' // 小于993视为平板及手机
    tagSize.value = 'medium'
  }
}

function playFun(id?: number, videoUrl?: string) {
  console.debug('playfun')
  debugger
  videoDialogInfo.value.url = videoUrl
  visibleDialog.value = true
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    debugger
    const data = await ProductSpuApi.getSkuPage(queryParams.value)
    spuList.value = data.list
    // total.value = data.total
    // 加载图片

    // for (let i = 1; i <= 6; i++) {
    //   // images.value.push({
    //   //   name: `image-${i}`,
    //   //   src: `../../../../../public/${i}.jpg`,
    //   //   link: `https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/${i}.jpg`
    //   // })
    //   spuList.value.push({
    //     id: i,
    //     name: '商品名称',
    //     categoryId: i,
    //     keyword: '商品名称keyword',
    //     unit: 1,
    //     videoUrl: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    //     picUrl: `../../../../../public/${i}.jpg`,
    //     sliderPicUrls: [`../../../../../public/${i}.jpg`, `../../../../../public/${i}.jpg`],
    //     introduction: '商品名称' + i,
    //     deliveryTypes: [1],
    //     deliveryTemplateId: 1,
    //     brandId: 1,
    //     specType: true,
    //     subCommissionType: true,
    //     skus: [],
    //     description: '商品名称' + i,
    //     sort: i,
    //     giveIntegral: 1,
    //     virtualSalesCount: 1,
    //     price: i,
    //     salesCount: 1,
    //     marketPrice: 1,
    //     costPrice: 1,
    //     stock: 1,
    //     status: 1
    //   })
    // }

    debugger
    // total.value = 6
  } finally {
    loading.value = false

    // 在Vue中使用onMounted钩子函数结合nextTick来获取动态渲染的元素高度是推荐的方法，‌尤其是在处理v-for指令渲染的列表元素时。‌

    // 在Vue中，‌当你需要获取动态渲染的DOM元素的高度时，‌直接在onMounted钩子中获取可能会遇到问题，‌因为此时DOM可能还没有完全渲染。‌为了确保获取到的是最新的、‌已经渲染的DOM元素，‌你应该使用nextTick函数。‌nextTick会等待下一次DOM更新循环结束之后执行延迟回调，‌在此期间，‌可以确保所有的DOM变更都已经完成。‌

    // 对于使用v-for指令渲染的列表元素，‌由于Vue的异步更新策略，‌直接在onMounted中尝试获取这些元素的高度可能不准确，‌因为列表中的某些项可能还没有被渲染。‌通过结合使用nextTick，‌你可以确保在尝试访问这些元素时，‌它们已经完全渲染在DOM中。‌

    // 此外，‌如果页面资源未完全渲染与加载完就尝试获取高度，‌结果也会不准确。‌因此，‌确保在页面元素完全加载完后再获取高度是非常重要的。‌

    // 综上所述，‌如果你在使用Vue（‌尤其是Vue 3）‌并且需要获取动态渲染的DOM元素的高度，‌特别是在使用v-for指令的情况下，‌你应该：‌

    //     在onMounted钩子中使用setInterval来定期检查文档是否完全加载。‌
    //     使用nextTick函数来确保在DOM更新完成后再尝试访问或修改DOM。‌

    // 这样，‌你可以更准确地获取到动态渲染的DOM元素的高度12。‌

    await nextTick()

    // 默认查询历史搜索信息
    // 初始化视频元素容器宽度 在onmounted里可以获取到任意一个静态的dom，注意，这里说的是静态dom，对于动态dom，他是获取不到的

    // 动态dom有2种情况

    // 1）带有v-if指令，获取不到值为false的那个dom

    // 2）带有v-for指令，当初始化时，要循环的数组没有值，这个时候是获取不到相关dom的

    // 重点：

    // 有v-show指令时,即使值为false，依旧能获取到相应的dom，切记他和v-if不一样
    // videoweight = document.getElementsByClassName('cardClass')[0].clientWidth * 0.93 //无法获取到动态元素 解决方法

    // 1）在nexttick中获取dom

    // 2）在onUpdated中获取dom
  }
}

/** 查询近期搜索关键字 */
const searchHistory = async () => {
  debugger
  loading.value = true
  try {
    // const data = await SearchHistoryApi.HistoryApi.searchLastestHistory()
    // searchHistoryList.value = data.list

    let items = [
      { id: 1, userid: 1, name: '1', sort: 1 },
      { id: 2, userid: 2, name: '2', sort: 2 }
    ]
    searchHistoryList.value = items

    console.debug('searchHistory' + searchHistoryList.value[0].id)
  } finally {
    loading.value = false
  }
}

/** 追加列表 分页追加+1 */
const pushList = async () => {
  loading.value = true
  try {
    const data = await ProductSpuApi.getSkuPage(queryParams.value)
    if (data.list.length == 0) {
      return
    }
    if (list.value.length > 9) {
      console.debug('[list.value.length] ' + list.value.length + ' data.list ' + data.list.length)

      list.value = data.list
    } else {
      list.value.push(...data.list)
    }
    // data.list.forEach((item) => {
    //   list.value.push(item)
    // })

    total.value = list.value.length
    console.debug('[plushList] [total]' + total.value)
    queryParams.value.pageNo = queryParams.value.pageNo + 1
  } finally {
    loading.value = false
    // 渲染完成后处理视频元素宽度
    await nextTick()
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNo = 1

  getList()
}

/** 点击历史搜索文本 */
const handleQueryBySearchHistory = (searchHistory) => {
  queryParams.value.name = searchHistory
  handleQuery()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const autoplayBanner = ref({
  delay: props.delay,
  disableOnInteraction: false, // 用户操作 swiper 之后，是否禁止 autoplay。默认为 true：停止。
  pauseOnMouseEnter: props.pauseOnMouseEnter // 鼠标置于 swiper 时暂停自动切换，鼠标离开时恢复自动切换，默认 false
})

const modulesCarousel = ref([Autoplay])

const autoplayCarousel = ref<object | boolean>({
  delay: 0,
  disableOnInteraction: false
})

const modulesBroadcast = ref([Navigation, Pagination, Mousewheel])

const { colorPalettes } = useInject('Swiper') // 主题色注入

const emits = defineEmits(['swiper', 'change'])

const swiperWidth = computed(() => {
  if (typeof props.width === 'number') {
    return '${props.width}px'
  } else {
    return props.width
  }
})

const swiperHeight = computed(() => {
  if (typeof props.height === 'number') {
    return '${props.height}px'
  } else {
    return props.height
  }
})

const modulesBanner = computed(() => {
  const modules = [Navigation, Pagination, Autoplay]
  const effectMoudles = {
    fade: EffectFade,
    cube: EffectCube,
    flip: EffectFlip,
    coverflow: EffectCoverflow,
    cards: EffectCards,
    creative: EffectCreative
  }
  if (props.effect !== 'slide') {
    modules.push(effectMoudles[props.effect])
  }
  return modules
})

function onSwiper(swiper: SwiperTypes) {
  emits('swiper', swiper)
  if (props.mode === 'carousel' && props.pauseOnMouseEnter) {
    swiper.el.onmouseenter = () => {
      // 移入暂停
      swiper.autoplay.stop()
    }
    swiper.el.onmouseleave = () => {
      // 移出启动
      swiper.autoplay.start()
    }
  }
}
function onSlideChange(swiper: SwiperTypes) {
  emits('change', swiper)
}
function getImageName(image: Image) {
  // 从图片地址 src 中获取图片名称
  if (image.name) {
    return image.name
  } else {
    const res = image.src.split('?')[0].split('/')
    return res[res.length - 1]
  }
}

function handleClose(tag) {
  this.searchHistoryList.splice(this.searchHistoryList.indexOf(tag), 1)
}
</script>

<style lang="less" scoped>
.swiper-banner {
  width: var(--swiper-width);
  height: var(--swiper-height);
  :deep(.swiper-wrapper) {
    transition-timing-function: var(--swiper-timing-function);
  }
}
.swiper-carousel {
  width: var(--swiper-width);
  height: var(--swiper-height);
  :deep(.swiper-wrapper) {
    /* 自动切换过渡效果设置 线性过渡模拟走马灯效果 */
    transition-timing-function: var(--swiper-timing-function);
  }
}
.swiper-broadcast {
  width: var(--swiper-width);
  height: var(--swiper-height);
  :deep(.swiper-wrapper) {
    transition-timing-function: var(--swiper-timing-function);
  }
}
.swiper-link {
  display: block;
  height: 100%;
  .swiper-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
  }
}
.swiper {
  --swiper-theme-color: var(--swiper-primary-color);
}
:deep(.swiper-pagination-bullet) {
  width: 12px;
  height: 12px;
}
.swiper-lazy-preloader-theme {
  --swiper-preloader-color: var(--swiper-primary-color);
}
</style>
